<template>
  <div>
    <form action="/" class="fixed">
      <van-search
        v-model="value"
        shape="round"
        background="#e4463b"
        placeholder="请输入搜索关键词"
        @focus="focus"
      >
        <template slot="left">
          <van-icon name="arrow-left" @click="closeEmpty()" />
        </template>
      </van-search>
    </form>
    <van-tabs v-model="active">
      <van-tab title="单曲">
        <!-- 单曲 -->
        <single :keywords="keywords" />
      </van-tab>
      <van-tab title="歌手">
        <!-- 歌手 -->
        <singer :keywords="keywords" />
      </van-tab>
      <van-tab title="歌单">
        <!-- 歌单 -->
        <playlist :keywords="keywords" />
      </van-tab>
      <van-tab title="用户">
        <!-- 用户 -->
        <the-user :keywords="keywords" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Playlist from './playlist.vue'
import Singer from './singer.vue'
import single from './single.vue'
import TheUser from './TheUser.vue'
export default {
  components: { single, Singer, Playlist, TheUser },
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      value: '',
      active: 0
    }
  },
  created () {
    this.value = this.keywords
  },
  mounted () {},
  methods: {
    focus (event) {
      this.$emit('closeEmpty', this.value)
    },
    closeEmpty () {
      this.value = ' '
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">
.van-icon-arrow-left {
  color: #fff;
  margin-right: 10px;
}
.van-search__content {
  background: #e46860;
}
/deep/.van-field__control {
  color: #fff;
}
.fixed {
  position: absolute;

  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 1000;
}
.van-tabs {
  top: 106px;
}
.van-tabs__nav {
  position: fixed;
}
// body {
//   font-size: 24px;
// }
</style>
